<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 属性选择器 */
        /* [class]{} */
        [data-index="0"] {
            width: 200px;
            height: 200px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <!-- div => 元素/标签/标记(html元素) -->
    <!-- 
        属性(html属性): 写在标签内和标签名以一个空格分隔的叫做属性(属性名="属性值")
        属性可以没有 也可以有多个 多个属性之间用空格分隔
    -->
    <div id="demo" class="one two three" title="hello"></div>
    <!-- <input type="text" name="" placeholder="">
    <a href=""></a>
    <img src="" alt=""> -->
</body>
<script>

    // 获取元素节点
    var demo = document.getElementById("demo");
    // console.log(demo, typeof demo);

    // 如何获取属性节点
    // 1. 属性节点 依存于元素节点 (写在标签内和标签名以一个空格分隔的叫做属性)
    // 2. 通过元素节点 对应属性名 获取属性节点
    // 3. 所有的节点 都是 对象

    // 除了官方给定属性 (id,class,title,type,name,placeholder,value,href,src .....)
    // H5 新增自定义属性(属性名="属性值") => 用于可以根据自己的需要自定义属性,在标签内存储一些数据

    // 如何自定义属性?
    // 1. 官方要求自定义属性以"data-"开头(data-属性名="属性值")
    // 2. 属性名和属性值完全有自己自定义
    // 注意: 属性值是字符串类型,存储其他类型,会隐式转化为字符串


    // Element.getAttribute(attrName)           对应属性名,获取属性值
    // Element.setAttribute(attrName,attrVal)   对应属性名,设置属性值(没有就新增,有就修改)
    // Element.removeAttribute(attrName)        对应属性名,删除该属性

    // 设置自定义属性
    demo.setAttribute("data-index", 0);
    demo.setAttribute("asd", "zxc");


    console.log(demo.getAttribute("data-index"));
    console.log(demo.getAttribute("asd"));


    demo.removeAttribute("data-index")
    demo.removeAttribute("asd")

    console.log(demo);


</script>

</html>